<template>
  <el-radio-group v-model="radioLabel">
    <el-radio-button :label="name1"></el-radio-button>
    <el-radio-button :label="name2"></el-radio-button>
  </el-radio-group>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
  name: 'Picker',
  props: {
    name1: {
      type: String,
      required: true,
    },
    name2: {
      type: String,
      required: true,
    },
    radio: Boolean,
  },
  setup(props, context) {
    const radioLabel = ref(props.radio === true ? props.name1 : props.name2);
    watch(
      () => radioLabel.value,
      () =>
        context.emit(
          'update:radio',
          radioLabel.value === props.name1 ? true : false
        )
    );
    return {
      radioLabel,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
:deep(.el-radio-button) {
  .el-radio-button__inner {
    background-color: white;
    width: 100px;
    border-color: $borderColor;
    color: $themeColor;
    box-shadow: none;
    &:hover {
      color: $themeColor;
    }
  }
  &.is-active {
    .el-radio-button__inner {
      background-color: $themeRed;
      border-color: $borderColor;
      color: white;
    }
  }
}
</style>
